<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>科技知识趣味挑战</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
  <style>
    /* 核心布局与组件样式 */
    .app-container {
      width: 375px;
      height: 812px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #F5F7FA;
    }
    .fixed-section {
      flex-shrink: 0;
    }
    .content-flex {
      flex: 1;
      overflow-y: auto;
      min-height: 0;
    }
    .app-page {
      border: 1px solid #E1E5EA;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      background: #FFFFFF;
    }

    /* 自定义组件 */
    .gradient-bg {
      background: linear-gradient(135deg, #2D5BFF, #7B68EE);
    }
    .option-card {
      transition: all 0.3s;
      border: 1px solid #E1E5EA;
    }
    .option-card.selected {
      border: 2px solid #2D5BFF;
      background-color: #F0F5FF;
    }
    .option-card.correct {
      border: 2px solid #00C853;
      background-color: #E8F5E9;
    }
    .option-card.wrong {
      border: 2px solid #FF5252;
      background-color: #FFEBEE;
    }
    .progress-bar {
      height: 6px;
      background: #EDF2F7;
      transition: width 0.5s;
    }
    .result-score {
      text-shadow: 0 4px 10px rgba(255, 107, 53, 0.3);
    }

    /* 隐藏滚动条 */
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .hide-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  </style>
</head>
<body class="flex justify-center items-center min-h-screen bg-gray-100 p-4">
  <div class="app-container">
    <!-- 引导页面 -->
    <div class="app-page w-full h-full flex flex-col" id="welcomePage">
      <div class="fixed-section p-6 flex justify-center items-center flex-grow-[0.8]">
        <div class="text-center space-y-6">
          <h1 class="text-[32px] font-semibold tracking-tight bg-clip-text text-transparent gradient-bg" id="quizTypeTitle">
            趣味答题挑战
          </h1>
          <p class="text-[#5A6270] text-lg leading-relaxed max-w-[300px] mx-auto">
            挑选你感兴趣的主题<br>挑战自我提升知识
          </p>
        </div>
      </div>
      
      <div class="fixed-section p-5 space-y-6" id="quizTypeSelection">
        <h2 class="text-[#2C3E50] text-xl font-medium text-center mb-3">选择测试类型</h2>
        <div class="space-y-3" id="quizTypesContainer">
          <!-- 测试类型将在这里动态生成 -->
        </div>
      </div>
      
      <div class="fixed-section p-8 flex justify-center hidden" id="startQuizBtn">
        <button onclick="startQuiz()" class="w-[120px] h-[120px] rounded-full gradient-bg text-white text-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
          开始挑战
        </button>
      </div>
      
      <div class="fixed-section mt-auto py-5 text-center">
        <span class="iconify text-[#A0A4AE] text-2xl" data-icon="mdi:alpha-t-circle"></span>
        <p class="text-[#A0A4AE] text-sm mt-2">TechQuiz © 2025</p>
      </div>
    </div>

    <!-- 答题页面 -->
    <div class="app-page w-full h-full flex-col hidden" id="quizPage">
      <!-- 顶部进度条 -->
      <div class="fixed-section px-5 pt-5">
        <div class="flex items-center justify-between mb-3">
          <span class="text-[#5A6270] font-medium">题目 <span id="currentQuestion">1</span>/<span id="totalQuestions">0</span></span>
          <span class="font-semibold" id="timer">00:30</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="progress-bar rounded-full gradient-bg" id="progressBar" style="width: 0%"></div>
        </div>
      </div>

      <!-- 题目内容 -->
      <div class="content-flex hide-scrollbar p-5 pt-3">
        <div class="text-[#2C3E50] text-xl font-normal mb-8 leading-relaxed" id="questionText">
          题目加载中...
        </div>
        
        <div class="space-y-4" id="optionsContainer">
          <!-- 选项动态生成 -->
        </div>
      </div>

      <!-- 底部导航 -->
      <div class="fixed-section p-5 flex justify-between">
        <button onclick="prevQuestion()" id="prevBtn" class="px-6 py-3 rounded-lg border border-[#E1E5EA] text-[#5A6270] font-medium hidden">
          上一题
        </button>
        <button onclick="nextQuestion()" id="nextBtn" class="ml-auto px-6 py-3 rounded-lg gradient-bg text-white font-medium">
          下一题
        </button>
      </div>
    </div>

    <!-- 结果展示页面 -->
    <div class="app-page w-full h-full flex-col hidden" id="resultPage">
      <div class="content-flex hide-scrollbar flex flex-col items-center text-center p-8 pt-12">
        <!-- 得分展示 -->
        <div class="mb-8">
          <p class="text-[#5A6270] text-lg mb-1">你的最终得分</p>
          <div class="result-score text-[#FF6B35] text-[48px] font-bold" id="finalScore">0</div>
        </div>
        
        <!-- 评价区域 -->
        <div class="bg-[#F8F9FA] rounded-xl p-6 max-w-[300px] mb-8">
          <span class="iconify inline-block text-4xl mb-3" id="resultIcon"></span>
          <p class="text-[#2C3E50] text-base mb-2 font-medium" id="resultTitle">评测中...</p>
          <p class="text-[#5A6270] text-sm leading-relaxed" id="resultDescription">
            基于你的答题情况生成个性评价
          </p>
        </div>
        
        <!-- 分享按钮 -->
        <div class="flex justify-center space-x-6 mb-10">
          <button class="w-10 h-10 bg-[#2D5BFF] rounded-full flex items-center justify-center">
            <span class="iconify text-white text-xl" data-icon="mdi:wechat"></span>
          </button>
          <button class="w-10 h-10 bg-[#FF2442] rounded-full flex items-center justify-center">
            <span class="iconify text-white text-xl" data-icon="mdi:weibo"></span>
          </button>
          <button class="w-10 h-10 bg-[#5A6270] rounded-full flex items-center justify-center">
            <span class="iconify text-white text-xl" data-icon="mdi:link"></span>
          </button>
        </div>
        
        <!-- 重新测试按钮 -->
        <button onclick="restartQuiz()" class="px-8 py-4 rounded-full gradient-bg text-white font-semibold shadow-md hover:shadow-lg transition-all">
          再测一次
        </button>
      </div>
    </div>
  </div>

  <script>
    // 题库数据
    const quizTypes = [
      {
        id: 'tech',
        name: '科技知识挑战',
        description: '测试你对科技领域的了解程度'
      },
      {
        id: 'health',
        name: '健康基本功',
        description: '考验你的健康知识储备'
      }
    ];

    const quizData = {
      tech: [
        {
          question: "以下哪种技术是量子计算的基础特性？",
          options: [
            "并行计算能力", 
            "光学传输协议", 
            "机械齿轮结构", 
            "蒸汽动力系统"
          ],
          correct: 0
        },
        {
          question: "区块链中的'智能合约'主要功能是什么？",
          options: [
            "自动化执行合约条款",
            "提升网络传输速度",
            "加密用户隐私数据",
            "优化图像渲染效果"
          ],
          correct: 0
        },
        {
          question: 'Neuralink公司开发的脑机接口主要用于？',
          options: [
            "治疗神经系统疾病",
            "提升游戏反应速度",
            "实现心灵感应通讯",
            "增强肌肉爆发力"
          ],
          correct: 0
        }
      ],
      health: [
        {
          question: "以下哪种维生素被称为'阳光维生素'？",
          options: [
            "维生素D", 
            "维生素C", 
            "维生素A", 
            "维生素B12"
          ],
          correct: 0
        },
        {
          question: "成年人每日建议饮水量大约是多少？",
          options: [
            "2000-2500毫升",
            "500-1000毫升",
            "3500-4000毫升",
            "5000毫升以上"
          ],
          correct: 0
        },
        {
          question: "健康成人的正常血压范围是？",
          options: [
            "收缩压<120mmHg且舒张压<80mmHg",
            "收缩压<150mmHg且舒张压<100mmHg",
            "收缩压<100mmHg且舒张压<60mmHg",
            "收缩压<180mmHg且舒张压<120mmHg"
          ],
          correct: 0
        },
        {
          question: "以下哪种食物富含优质蛋白质？",
          options: [
            "鸡胸肉",
            "白糖",
            "黄油",
            "果冻"
          ],
          correct: 0
        },
        {
          question: "成人每晚理想的睡眠时间是？",
          options: [
            "7-9小时",
            "3-4小时",
            "5-6小时",
            "10-12小时"
          ],
          correct: 0
        }
      ]
    };
    
    // 结果评价数据
    const resultData = {
      0: {
        title: "科技新秀",
        icon: "mdi:star-outline",
        description: "你对科技知识有基本了解，但还需深入学习新兴技术概念，建议关注前沿科技动态"
      },
      1: {
        title: "科技达人",
        icon: "mdi:star-half-full",
        description: "你熟悉主要科技趋势，理解核心技术原理，可以尝试挑战更专业的问题"
      },
      2: {
        title: "科技专家",
        icon: "mdi:star",
        description: "你对前沿科技有深刻见解，能准确把握技术发展方向，继续保持探索精神！"
      },
      3: {
        title: "科技先锋",
        icon: "mdi:crown",
        description: "你的科技知识储备令人惊叹，完全掌握了当今最前沿的技术理念与创新趋势"
      }
    };

    // 状态管理
    let currentQuizType = 'tech';
    let currentQuestion = 0;
    let userAnswers = [];
    let timeLeft = 30;
    let timerInterval;

    // 初始化页面
    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById('totalQuestions').textContent = quizData[currentQuizType].length;
      loadQuizTypes();
    });

    // 加载测试类型选择
    function loadQuizTypes() {
      const quizTypesContainer = document.getElementById('quizTypesContainer');
      quizTypesContainer.innerHTML = '';
      
      quizTypes.forEach(type => {
        const typeElement = document.createElement('div');
        typeElement.className = 'quiz-type-card p-5 rounded-lg border border-[#E1E5EA] cursor-pointer hover:border-[#2D5BFF] hover:bg-[#F0F5FF] transition-all';
        typeElement.innerHTML = `
          <h3 class="text-lg font-medium text-[#2C3E50] mb-1">${type.name}</h3>
          <p class="text-sm text-[#5A6270]">${type.description}</p>
        `;
        typeElement.onclick = () => selectQuizType(type.id);
        quizTypesContainer.appendChild(typeElement);
      });
    }
    
    // 选择测试类型
    function selectQuizType(typeId) {
      currentQuizType = typeId;
      document.getElementById('quizTypeTitle').textContent = 
        quizTypes.find(t => t.id === typeId).name;
      document.getElementById('quizTypeSelection').classList.add('hidden');
      document.getElementById('startQuizBtn').classList.remove('hidden');
      document.getElementById('totalQuestions').textContent = quizData[currentQuizType].length;
    }

    // 开始测试
    function startQuiz() {
      document.getElementById('welcomePage').classList.add('hidden');
      document.getElementById('quizPage').classList.remove('hidden');
      loadQuestion(currentQuestion);
      startTimer();
    }

    // 加载题目
    function loadQuestion(index) {
      const question = quizData[currentQuizType][index];
      document.getElementById('questionText').textContent = question.question;
      document.getElementById('currentQuestion').textContent = index + 1;
      
      // 更新进度条
      const progressPercent = ((index + 1) / quizData[currentQuizType].length) * 100;
      document.getElementById('progressBar').style.width = `${progressPercent}%`;
      
      // 显示/隐藏上一题按钮
      document.getElementById('prevBtn').classList.toggle('hidden', index === 0);
      
      // 生成选项
      const optionsContainer = document.getElementById('optionsContainer');
      optionsContainer.innerHTML = '';
      
      question.options.forEach((option, i) => {
        const optionElement = document.createElement('div');
        optionElement.className = `option-card p-4 rounded-lg cursor-pointer transition-colors ${
          userAnswers[index] === i ? 'selected' : ''
        }`;
        optionElement.innerHTML = `
          <div class="flex items-center">
            <span class="w-6 h-6 rounded-full border border-[#E1E5EA] mr-3 flex items-center justify-center">${String.fromCharCode(65+i)}</span>
            <span>${option}</span>
          </div>
        `;
        optionElement.onclick = () => selectOption(i);
        optionsContainer.appendChild(optionElement);
      });
      
      // 更新按钮文本
      document.getElementById('nextBtn').textContent = 
        index === quizData[currentQuizType].length - 1 ? '查看结果' : '下一题';
    }

    // 选择选项
    function selectOption(optionIndex) {
      userAnswers[currentQuestion] = optionIndex;
      
      // 移除先前选择
      document.querySelectorAll('.option-card').forEach(card => {
        card.classList.remove('selected', 'correct', 'wrong');
      });
      
      // 标记当前选择
      const selectedCard = document.querySelectorAll('.option-card')[optionIndex];
      selectedCard.classList.add('selected');
      
      // 标记正确答案
      if (optionIndex === quizData[currentQuizType][currentQuestion].correct) {
        selectedCard.classList.add('correct');
      } else {
        selectedCard.classList.add('wrong');
        const correctCard = document.querySelectorAll('.option-card')[quizData[currentQuizType][currentQuestion].correct];
        correctCard.classList.add('correct');
      }
    }

    // 上一题
    function prevQuestion() {
      if (currentQuestion > 0) {
        currentQuestion--;
        loadQuestion(currentQuestion);
      }
    }

    // 下一题/查看结果
    function nextQuestion() {
      if (userAnswers[currentQuestion] === undefined) {
        alert('请选择一个选项');
        return;
      }
      
      if (currentQuestion < quizData[currentQuizType].length - 1) {
        currentQuestion++;
        loadQuestion(currentQuestion);
      } else {
        clearInterval(timerInterval);
        showResults();
      }
    }

    // 计时器
    function startTimer() {
      clearInterval(timerInterval);
      timeLeft = 30;
      document.getElementById('timer').textContent = '00:' + (timeLeft < 10 ? '0' : '') + timeLeft;
      
      timerInterval = setInterval(() => {
        timeLeft--;
        document.getElementById('timer').textContent = '00:' + (timeLeft < 10 ? '0' : '') + timeLeft;
        
        if (timeLeft <= 0) {
          clearInterval(timerInterval);
          if (userAnswers[currentQuestion] === undefined) {
            userAnswers[currentQuestion] = -1;
          }
          nextQuestion();
        }
      }, 1000);
    }

    // 显示结果
    function showResults() {
      document.getElementById('quizPage').classList.add('hidden');
      document.getElementById('resultPage').classList.remove('hidden');
      
      // 计算分数
      const score = userAnswers.reduce((acc, ans, index) => 
        acc + (ans === quizData[currentQuizType][index].correct ? 1 : 0), 0);
      
      const percentage = Math.round((score / quizData[currentQuizType].length) * 100);
      document.getElementById('finalScore').textContent = percentage;
      
      // 结果评价
      const resultLevel = resultData[score] || resultData[0];
      document.getElementById('resultTitle').textContent = resultLevel.title;
      document.getElementById('resultDescription').textContent = resultLevel.description;
      document.getElementById('resultIcon').setAttribute('data-icon', resultLevel.icon);
    }

    // 重新测试
    function restartQuiz() {
      document.getElementById('resultPage').classList.add('hidden');
      document.getElementById('welcomePage').classList.remove('hidden');
      document.getElementById('quizTypeSelection').classList.remove('hidden');
      document.getElementById('startQuizBtn').classList.add('hidden');
      currentQuestion = 0;
      userAnswers = [];
      document.getElementById('progressBar').style.width = '0%';
    }
  </script>
</body>
</html>
